<template>
	<div ref="wrapRef" style="width: 100%; height: 100%"></div>
</template>
<script lang="ts">
	import {defineComponent, ref, nextTick, unref, onMounted} from 'vue';

	import {useScript} from '/@/hooks/web/useScript';
	import u541 from '/@/assets/images/userAnalysisDetails/u541.svg';
	import u545 from '/@/assets/images/userAnalysisDetails/u545.png';

	const A_MAP_URL = 'https://webapi.amap.com/maps?v=2.0&key=35b11c90308c1e231bdfff268f9d0bfd';

	export default defineComponent({
		name: 'AMap',
		props: {
			chartData: {
				type: Array,
				default: () => [],
			},
			width: {
				type: String,
				default: '100%',
			},
			height: {
				type: String,
				default: 'calc(100vh - 78px)',
			},
		},
		setup(props) {
			const wrapRef = ref<HTMLDivElement | null>(null);
			const {toPromise} = useScript({src: A_MAP_URL});

			async function initMap() {
				await toPromise();
				await nextTick();
				const wrapEl = unref(wrapRef);
				if (!wrapEl) return;
				const AMap = (window as any).AMap;

				const map = new AMap.Map(wrapEl, {
					zoom: 8,
					center: [props.chartData[0].stationLng, props.chartData[0].stationLat],
					viewMode: '3D',
					mapStyle: 'amap://styles/darkblue',
					features: ['bg', 'road', 'building', 'point'],
				});
				const markerContent = `
        <div class='bg_wrap'>
          <img class='img_wrap' src="${u541}">
         <div class="custom-content-marker">
             <img class='custom_img' src="${u545}">
           </div>
        </div>
        `;

				// let points = [
				// 	{lng: 112, lat: 112},
				// 	{lng: 114, lat: 114},
				// 	{lng: 116, lat: 116},
				// 	{lng: 118, lat: 118},
				// 	{lng: 110, lat: 110},
				// 	{lng: 102, lat: 112},
				// 	{lng: 122, lat: 112},
				// 	{lng: 112, lat: 102},
				// ];
				// let marks =[]
				// for (let i = 0; i < points.length; i++) {
				// 	const position = new AMap.LngLat(points[i].lng, points[i].lat);
				// 	const marker = new AMap.Marker({
				// 		position: position,
				// 		content: markerContent, //将 html 传给 content
				// 		offset: new AMap.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
				// 	});
				// marks.push(marker)
				// }

				// const position = new AMap.LngLat(116.397428, 39.90923);
				// const marker = new AMap.Marker({
				// 	position: position,
				// 	content: markerContent,
				// 	offset: new AMap.Pixel(-13, -30),
				// });
				// var markers = [{position: [115.304889, 38.950258], name: ' marker3 '}];
				var markers = props.chartData.map((item) => ({position: [item.stationLng, item.stationLat], name: 'marker3'}));

				markers.forEach(function (marker) {
					new AMap.Marker({
						position: marker.position,
						map: map,
						title: marker.name,
						content: markerContent,
						offset: new AMap.Pixel(-13, -30),
					});
				});

				// var marker3 = new AMap.Marker({
				// 	position: new AMap.LngLat(112.389293, 34.909986),
				// 	content: markerContent,
				// 	offset: new AMap.Pixel(-13, -30),
				// });

				// map.add(marks);
			}
			onMounted(() => {
				initMap();
			});

			watchEffect(() => {
				props.chartData && initMap();
			});
			return {wrapRef};
		},
	});
</script>

<style lang="less">
	.bg_wrap {
		width: 3.75rem;
		height: 3.75rem; /* 设置图片容器的初始大小 */
		overflow: hidden; /* 隐藏超出容器的部分 */
		position: relative;
	}
	.img_wrap {
		width: 3.75rem; /* 图片宽度自适应容器 */
		height: 3.75rem;
		top: 1.375rem;
		left: 1.375rem;
		position: absolute;
		animation: round3 3s both infinite;
	}
	@keyframes round3 {
		0% {
			width: 1rem;
			height: 1rem;
			top: 1.375rem;
			left: 1.375rem;
		}
		100% {
			width: 3.75rem;
			height: 3.75rem;
			top: 0;
			left: 0;
			opacity: 0;
		}
	}

	.custom-content-marker {
		position: absolute;
		width: 1.25rem;
		height: 1.25rem;
		top: 1.25rem;
		left: 1.25rem;
		background: #1890ff;
		// background-image: url('/src/assets/images/userAnalysisDetails/u541.svg');
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.custom-content-marker img {
		width: 0.625rem;
		height: 0.625rem;
	}

	// .custom-content-marker .close-btn {
	// 	position: absolute;
	// 	top: -6px;
	// 	right: -8px;
	// 	width: 15px;
	// 	height: 15px;
	// 	font-size: 12px;
	// 	background: #ccc;
	// 	border-radius: 50%;
	// 	color: #fff;
	// 	text-align: center;
	// 	line-height: 15px;
	// 	box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
	// }

	// .custom-content-marker .close-btn:hover {
	// 	background: #666;
	// }
</style>
